<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <div id="terrainMenu"></div>
    <div id="zoomButtons"></div>
    <div id="toggleLighting"></div>
    <div id="sampleButtons"></div>
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    Sandcastle.addDefaultToolbarMenu([{
        //
        // To clamp points or billboards set the heightReference to CLAMP_TO_GROUND or RELATIVE_TO_GROUND
        //
        text : 'Draw Point with Label',
        onselect : function() {
            var e = viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                point : {
                    color : Cesium.Color.SKYBLUE,
                    pixelSize : 10,
                    outlineColor : Cesium.Color.YELLOW,
                    outlineWidth : 3,
                    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
                },
                label : {
                    text : 'Clamped to ground',
                    font : '14pt sans-serif',
                    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
                    horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
                    verticalOrigin : Cesium.VerticalOrigin.BASELINE,
                    fillColor : Cesium.Color.BLACK,
                    showBackground : true,
                    backgroundColor : new Cesium.Color(1, 1, 1, 0.7),
                    backgroundPadding : new Cesium.Cartesian2(8, 4),
                    disableDepthTestDistance : Number.POSITIVE_INFINITY // draws the label in front of terrain
                }
            });

            viewer.trackedEntity = e;
        }
    }, {
        text : 'Draw Billboard',
        onselect : function() {
            var e = viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                billboard : {
                    image : './img/igs/facility.gif',
                    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
                }
            });

            viewer.trackedEntity = e;
        }
    }, {
        //
        // Corridors, polygons and rectangles will be clamped automatically if they are filled with a constant color and
        // has no height or extruded height.
        // NOTE: Setting height to 0 will disable clamping.
        //
        text : 'Draw Corridor',
        onselect : function() {
            var e = viewer.entities.add({
                corridor : {
                    positions : Cesium.Cartesian3.fromDegreesArray([
                        -122.19, 46.1914,
                        -122.21, 46.21,
                        -122.23, 46.21
                    ]),
                    width : 2000.0,
                    material : Cesium.Color.GREEN.withAlpha(0.5)
                }
            });

            viewer.zoomTo(e);
        }
    }, {
        text : 'Draw Polygon',
        onselect : function() {
            var e = viewer.entities.add({
                polygon : {
                    hierarchy : {
                        positions : [new Cesium.Cartesian3(-2358138.847340281, -3744072.459541374, 4581158.5714175375),
                            new Cesium.Cartesian3(-2357231.4925370603, -3745103.7886602185, 4580702.9757762635),
                            new Cesium.Cartesian3(-2355912.902205431, -3744249.029778454, 4582402.154378103),
                            new Cesium.Cartesian3(-2357208.0209552636, -3743553.4420488174, 4581961.863286629)]
                    },
                    material : Cesium.Color.BLUE.withAlpha(0.5)
                }
            });

            viewer.zoomTo(e);
        }
    }, {
        text : 'Draw Textured Polygon',
        onselect : function() {
            if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
                window.alert('Terrain Entity materials are not supported on this platform');
                return;
            }

            var e = viewer.entities.add({
                polygon : {
                    hierarchy : {
                        positions : [new Cesium.Cartesian3(-2358138.847340281, -3744072.459541374, 4581158.5714175375),
                            new Cesium.Cartesian3(-2357231.4925370603, -3745103.7886602185, 4580702.9757762635),
                            new Cesium.Cartesian3(-2355912.902205431, -3744249.029778454, 4582402.154378103),
                            new Cesium.Cartesian3(-2357208.0209552636, -3743553.4420488174, 4581961.863286629)]
                    },
                    material : './img/igs/Cesium_Logo_Color.jpg',
                    classificationType : Cesium.ClassificationType.TERRAIN,
                    stRotation : Cesium.Math.toRadians(45)
                }
            });

            viewer.zoomTo(e);
        }
    }, {
        text : 'Draw Rectangle',
        onselect : function() {
            var e = viewer.entities.add({
                rectangle : {
                    coordinates : Cesium.Rectangle.fromDegrees(-122.3, 46.0, -122.0, 46.3),
                    material : Cesium.Color.RED.withAlpha(0.5)
                }
            });

            viewer.zoomTo(e);
        }
    }, {
        text : 'Draw Model',
        onselect : function() {
            var e = viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
                model : {
                    uri : '../data/models/CesiumMan/Cesium_Man.glb',
                    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
                    minimumPixelSize : 128,
                    maximumScale : 100
                }
            });

            viewer.trackedEntity = e;
        }
    }, {
        text : 'Sample line positions and draw with depth test disabled',
        onselect : function() {
            var length = 1000;

            var startLon = Cesium.Math.toRadians(86.953793);
            var endLon = Cesium.Math.toRadians(86.896497);

            var lat = Cesium.Math.toRadians(27.988257);

            var terrainSamplePositions = [];
            for (var i = 0; i < length; ++i) {
                var lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
                var position = new Cesium.Cartographic(lon, lat);
                terrainSamplePositions.push(position);
            }

            Cesium.when(Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, terrainSamplePositions), function(samples) {
                var offset = 10.0;
                for (var i = 0; i < samples.length; ++i) {
                    samples[i].height += offset;
                }

                viewer.entities.add({
                    polyline : {
                        positions : Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples),
                        followSurface : false,
                        width : 5,
                        material : new Cesium.PolylineOutlineMaterialProperty({
                            color : Cesium.Color.ORANGE,
                            outlineWidth : 2,
                            outlineColor : Cesium.Color.BLACK
                        }),
                        depthFailMaterial : new Cesium.PolylineOutlineMaterialProperty({
                            color : Cesium.Color.RED,
                            outlineWidth : 2,
                            outlineColor : Cesium.Color.BLACK
                        })
                    }
                });

                var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
                offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
                viewer.camera.lookAt(target, offset);
                viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            });
        }
    }, {
        text : 'Draw polyline on terrain',
        onselect : function() {

            if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
                console.log('Polylines on terrain are not supported on this platform');
            }

            viewer.entities.add({
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray([
                        86.953793, 27.928257,
                        86.953793, 27.988257,
                        86.896497, 27.988257
                    ]),
                    clampToGround : true,
                    width : 5,
                    material : new Cesium.PolylineOutlineMaterialProperty({
                        color : Cesium.Color.ORANGE,
                        outlineWidth : 2,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });

            var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
            var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
            viewer.camera.lookAt(target, offset);
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }
    }], 'zoomButtons');

    Sandcastle.reset = function () {
        viewer.entities.removeAll();
    };



</script>
</body>
</html>